<script setup lang="ts">
const router = useRouter(); // 路由跳转方法
// 需要从设置的lang/index中获取配置的i18n
import { i18n } from '@/lang/index';
const { t } = i18n.global;

const errorMap: any = {
  url: new URL('@/assets/images/svgs/500.svg', import.meta.url).href,
  message: t('error.networkError'),
  buttonText: t('error.returnToHome'),
};

// 返回首页
const backClick = () => {
  router.push('/');
};

</script>

<template>
  <div class="error_500">
    <div class="error_center">
      <img width="350" :src="errorMap.url" />
      <div>
        {{ errorMap.message }}
      </div>
      <div>
        <ElButton type="primary" @click="backClick">
          {{ errorMap.buttonText }}
        </ElButton>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.error_500 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .error_center {
    width: 50%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    div {
      margin-top: 10px;
    }
  }
}
</style>
